<template>
  <div class="menu">
      <div class="logo" >
          <img v-show="!isCollapse"  src="https://t8.baidu.com/it/u=3447508208,3841882168&fm=85&app=79&f=JPG?w=121&h=75&s=2F8D3F661F216D2252CFA27B0300707A" alt="" class="logo-img">
      </div>
      <el-menu
         class="el-menu-vertical-demo" 
          @open="handleOpen" 
          @close="handleClose" 
          :collapse="isCollapse"
          router
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="$route.path"
          :unique-opened="true"
          v-if="userInfo"
      >
           <el-menu-item index="/home">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
             <el-sub-menu index="/users">
              <template #title>
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/users/add" v-if="userInfo.role>=2">用户新增</el-menu-item>
                 <el-menu-item index="/users/list">用户列表</el-menu-item>
                <el-menu-item index="/users/role" v-if="userInfo.role>=3">用户权限</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="/anno">
              <template #title>
                <i class="el-icon-microphone"></i>
                <span slot="title">公告管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/anno/list">公告列表</el-menu-item>
                <el-menu-item index="/anno/add" v-if="userInfo.role>=2">公告新增</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
             <el-sub-menu index="/advise">
              <template #title>
                <i class="el-icon-document"></i>
                <span slot="title">意见管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/advise/add">意见新增</el-menu-item>
                <el-menu-item index="/advise/list">意见列表</el-menu-item>
                <el-menu-item index="/advise/chart" v-if="userInfo.role>=2">意见分析</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="/info">
              <i class="el-icon-s-custom"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <!-- <el-menu-item index="/logout"  >
              <i class="el-icon-switch-button"></i>
              <span slot="title">退出</span>
            </el-menu-item> -->
      </el-menu>
  </div>
</template>

<script>
import {useStore} from "vuex"
import {computed} from "vue"
import {useRouter} from "vue-router"
import { ElMessageBox, ElMessage } from 'element-plus'
export default {
  name:"menu",
  mounted(){
    console.log(this.$route)
  },
  setup(){
    const store = useStore()
    const router = useRouter()
    const userInfo = computed(()=>{
      return store.state.userInfo;
    })
    const isCollapse = computed(()=>{
      return store.state.isCollapse
    })
    const handleOpen = (index)=>{
      console.log(index);
    }
    const handleClose = ()=>{

    }
    const todoLogout = ()=>{
        ElMessageBox.confirm(
        '亲,你真的要退出登录吗?',
        '退出警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
            router.replace({name:"login"})
            sessionStorage.removeItem("authtoken");
            store.commit("changeUserInfo",null);
        })
        .catch(() => {
          
        })
    }
    return {
      handleOpen,
      handleClose,
      isCollapse,
      userInfo,
      todoLogout
    }
  }
}
</script>

<style lang="scss" scoped>
.menu{
  width:100%;
  height:100%;
  .logo{
    width:100%;
    padding:20px;
    .logo-img{
      margin: 10px auto;
    }
  }
}
</style>
